let movableAreaWidth = 0
let movableViewWidth = 0
const backgroundAudioManager = wx.getBackgroundAudioManager()
let duration = 0
let currentSec = -1
let isMoving = false
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isSame:Boolean
  },

  /**
   * 组件的初始数据
   */
  data: {
    showTime:{
      // 歌曲当前时间
      currentTime:'00:00',
      // 歌曲总时间
      totalTime:'00:00'
    },
    // 在x轴上移动的距离
    movableDis:0,
    // 进度条移动的距离  百分比
    progress:0
  },

  lifetimes:{
    ready(){
      if(this.properties.isSame && this.data.showTime.totalTime == '00:00'){
        this.setTime()
      }
      this.getMovableDis()
      this.bindBGMEvent()
    }
  },


  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event){
      // console.log(event);
      if(event.detail.source == 'touch'){
        this.data.progress = event.detail.x / (movableAreaWidth-movableViewWidth) * 100
        this.data.movableDis =  event.detail.x
        isMoving = true
      }
      
    },
    onTouchEnd(){
      const currentTimeFmt = this.dateFormat(Math.floor(backgroundAudioManager.currentTime))
      this.setData({
        progress: this.data.progress,
        movableDis: this.data.movableDis,
        ['showTime.currentTime']: currentTimeFmt.min + ':' + currentTimeFmt.sec
      })
      backgroundAudioManager.seek(duration * this.data.progress / 100)
      isMoving = false
    },


    // 获取x轴上的偏移量
    getMovableDis(){
      const query = this.createSelectorQuery()
      query.select('.movable-area').boundingClientRect()
      query.select('.movable-view').boundingClientRect()
      query.exec(rect => {
        movableAreaWidth = rect[0].width
        movableViewWidth = rect[1].width
      })
    },

    bindBGMEvent(){
      backgroundAudioManager.onPlay(() => {
        console.log('onPlay')
        isMoving = false
        this.triggerEvent('musicPlay')
      })

      backgroundAudioManager.onStop(() => {
        // console.log('onStop')
      })

      backgroundAudioManager.onPause(() => {
        console.log('Pause')
        this.triggerEvent('musicPause')
      })

      backgroundAudioManager.onWaiting(() => {
        // console.log('onWaiting')
      })

      backgroundAudioManager.onCanplay(() => {
        // console.log('onCanplay')
        // console.log(backgroundAudioManager.duration);
        if(typeof backgroundAudioManager.duration != 'undefined'){
          this.setTime()
        }else{
          setTimeout(() => {
            this.setTime()
          }, 1000);
        }
      })

      backgroundAudioManager.onTimeUpdate(() => {
        if(!isMoving){
          // console.log('onTimeUpdate')
        const currentTime = backgroundAudioManager.currentTime
        
        const duration = backgroundAudioManager.duration
        const sec = currentTime.toString().split('.')[0]
        if(currentSec != sec){
          // console.log(currentTime);
          const currentTimeFmt = this.dateFormat(currentTime)
          this.setData({
            movableDis:(movableAreaWidth - movableViewWidth) * currentTime / duration,
            progress:currentTime / duration * 100,
            ['showTime.currentTime']:`${currentTimeFmt.min}:${currentTimeFmt.sec}`
          })
          currentSec = sec
          this.triggerEvent('timeupdata',{
            currentTime
          })
        }
        }
      })

      backgroundAudioManager.onEnded(() => {
        // console.log("onEnded")
        this.triggerEvent('musicEnd')
      })

      backgroundAudioManager.onError((res) => {
        // console.error(res.errMsg)
      })
    },

    setTime(){
      duration = backgroundAudioManager.duration
      const durationFmt = this.dateFormat(duration)
      this.setData({
        ['showTime.totalTime']:`${durationFmt.min}:${durationFmt.sec}`
      })
    },

    // 格式化总时长j
    dateFormat(sec){
      const min = Math.floor(sec / 60)
      sec = Math.floor(sec % 60)
      return {
        'min':this.parseZero(min),
        'sec':this.parseZero(sec)
      }
    },

    // 补零
    parseZero(num){
      return num < 10 ? '0' + num : num
    }
  }
})
